<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>
<body>
<ul>
    <li><a href="#find">发现</a></li>
    <li><a href="#friend">朋友</a></li>
    <li><a href="#mine">我的</a></li>
</ul>
<div id="box"></div>
<script>
    $(function () {
        $(window).on('hashchange', function () {
            // console.log(location.href);
            // console.log(location.hash);
            var hash = location.hash;
            switch (hash) {
                case '#find':
                    console.log(hash);
                    $.ajax({
                        type: 'get',
                        url: 'find.json',
                        success: function (data) {
                            console.log(data);
                            $('#box').html(data.data);
                        }
                    });
                    break;
                case '#friend':
                    console.log(hash);
                    $.ajax({
                        type: 'get',
                        url: 'friend.json',
                        success: function (data) {
                            console.log(data);
                            $('#box').html(data.data);
                        }
                    });
                    break;
                case '#mine':
                    console.log(hash);
                    $.ajax({
                        type: 'get',
                        url: 'mine.json',
                        success: function (data) {
                            console.log(data);
                            $('#box').html(data.data);
                        }
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>
